<template>
  <div class="home-container">
    <h1>糖尿病健康数据看板</h1>

    <!-- 数据可视化区域 -->
    <div class="dashboard">
      <el-card class="dashboard-card">
        <template #header>
          <div class="card-header">
            <span>血糖趋势</span>
          </div>
        </template>
        <div class="card-content">
          <div id="glucoseChart" style="height: 150px;"></div>
        </div>
      </el-card>

      <el-card class="dashboard-card">
        <template #header>
          <div class="card-header">
            <span>饮食记录</span>
          </div>
        </template>
        <div class="card-content">
          <div id="dietChart" style="height: 150px;"></div>
        </div>
      </el-card>

      <el-card class="dashboard-card">
        <template #header>
          <div class="card-header">
            <span>运动记录</span>
          </div>
        </template>
        <div class="card-content">
          <div id="exerciseChart" style="height: 150px;"></div>
        </div>
      </el-card>
    </div>

    <!-- 数据看板说明 -->
    <el-card class="dashboard-info">
      <template #header>
        <div class="card-header">
          <span>健康数据说明</span>
        </div>
      </template>
      <div class="info-content">
        <p>本看板展示了您的血糖、饮食和运动数据，帮助您更好地管理糖尿病。</p>
        <p>点击左侧导航菜单中的"智能问答"可获取专业建议。</p>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Chart } from 'chart.js/auto';

// 初始化图表
onMounted(() => {
  initCharts();
});

const initCharts = () => {
  // 血糖趋势图
  new Chart(
    document.getElementById('glucoseChart') as HTMLCanvasElement,
    {
      type: 'line',
      data: {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        datasets: [{
          label: '空腹血糖',
          data: [5.6, 5.8, 5.4, 5.9, 5.7, 6.1, 5.5],
          borderColor: 'rgb(255, 99, 132)',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          tension: 0.1
        }, {
          label: '餐后血糖',
          data: [7.8, 8.2, 7.5, 8.0, 7.9, 8.5, 7.7],
          borderColor: 'rgb(54, 162, 235)',
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          tension: 0.1
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          }
        }
      }
    }
  );

  // 饮食记录图
  new Chart(
    document.getElementById('dietChart') as HTMLCanvasElement,
    {
      type: 'doughnut',
      data: {
        labels: ['碳水化合物', '蛋白质', '脂肪', '纤维'],
        datasets: [{
          data: [40, 30, 20, 10],
          backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)'
          ],
          hoverOffset: 4
        }]
      }
    }
  );

  // 运动记录图
  new Chart(
    document.getElementById('exerciseChart') as HTMLCanvasElement,
    {
      type: 'bar',
      data: {
        labels: ['步行', '跑步', '游泳', '瑜伽', '骑行'],
        datasets: [{
          label: '运动时长(分钟)',
          data: [120, 60, 45, 90, 75],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)'
          ],
          borderColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(153, 102, 255)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    }
  );
};
</script>

<style scoped>
.home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  color: #303133;
  margin-bottom: 30px;
  text-align: center;
  font-size: 28px;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.dashboard-card {
  height: 250px;
  transition: all 0.3s ease;
}

.dashboard-card:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 10px 0;
  height: calc(100% - 40px);
}

/* 数据看板说明样式 */
.dashboard-info {
  margin-top: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-content {
  padding: 20px;
  line-height: 1.6;
  color: #606266;
}

.info-content p {
  margin-bottom: 10px;
}
</style>